<template>
  <div class="followup-box inner-content">
    <div class="inner inner-content-box">
      <div class="searchBox">
        <el-form
          :inline="true"
          :model="searchForm"
          size="small"
          style="width: 100%"
        >
          <el-form-item label="身份">
            <el-input
              v-model="searchForm.type"
              placeholder="身份"
              clearable
              style="width: 160px"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="searchForm.mobile"
              placeholder="手机号"
              clearable
              style="width: 160px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getList"
              size="small"
              icon="el-icon-search"
              >搜索</el-button
            >
            <el-button @click="searchReset" size="small" icon="el-icon-delete"
              >清空</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="detailsBox">
        <ag-grid-vue
          class="ag-theme-alpine ag-theme-quartz"
          :gridOptions="gridOptions"
          :localeText="localeText"
          @grid-ready="onGridReady"
          @sort-changed="onSortChangedAggrid"
          @filter-changed="onFilterChangedAggrid"
          :rowHeight="38"
          :headerHeight="42"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :rowData="rowData"
          rowSelection="multiple"
          :rowMultiSelectWithClick="true"
          :enableRangeSelection="true"
        >
        </ag-grid-vue>
      </div>
      <div class="pageBox">
        <div>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
// import Vue from 'vue'
import listBtn from '@/views/modules/collect/listBtn.vue'
import listJson from '@/views/modules/collect/list.json'
import { fetchList } from '@/api/collect.js'
import moment from 'moment'
export default {
  beforeMount () {
    this.gridOptions = {
      // 通过这个属性建立了上下文引用
      context: { componentParent: this }
      // 说人话就是可以在自己声明的组件里调用到父组件的方法和属性了
    }
  },
  components: {
    listBtn
  },
  watch: {
    $route: {
      handler (newValue, oldValue) {
        console.log(11111)
        if (oldValue.name === 'examinationScore-list') {
          console.log(22222222)
        }
      },
      deep: true
    }
  },
  data () {
    return {
      gridOptions: null,
      localeText: this.$AG_GRID_LOCALE_ZZZ,
      col: [],
      page: {
        pageSizes: [500000],
        curentPage: 1,
        total: 0,
        pageSize: 500000
      },
      searchForm: {
        type: '',
        mobile: '',
      },
      defaultColDef: {
        editable: false,
        sortable: true,
        resizable: true,
        filter: true,
        cellDataType: false
      },
      rowIndexArr: [
        {
          field: 'rowIndex',
          headerName: '序号',
          width: 100,
          checkboxSelection: false,
          headerCheckboxSelection: false,
          sortable: false,
          pinned: 'left',
          valueGetter: (params) => {
            // 返回当前行的序号
            return params.node.rowIndex + 1
          }
        }
        // {
        //   field: 'handle',
        //   headerName: '操作',
        //   width: 150,
        //   pinned: 'right',
        //   cellRenderer: 'listBtn'
        // }
      ],
      columnDefs: [],
      gridApi: null,
      rowData: [],
      msg: null
    }
  },
  created () {
    this.getHeadersCol()
    setTimeout(() => {
      this.getList()
    }, 10)
  },
  methods: {
    onSortChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.rowData))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.rowData = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    onFilterChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.rowData))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.rowData = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    // 获取表头
    getHeadersCol () {
      this.columnDefs = []
      setTimeout(() => {
        this.col = JSON.parse(JSON.stringify(listJson.column))
        this.columnDefs = this.rowIndexArr.concat(this.col)
      }, 10)
    },
    // 装载列表
    onGridReady (params) {
      this.gridApi = params.api
    },
    getList () {
      let params = {
        limit: this.page.pageSize,
        page: this.page.curentPage,
        type: this.searchForm.type || '',
        mobile: this.searchForm.mobile || '',
        // stationNumber: this.searchForm.stationNumber || '',
        // 状态1 是已完成的考试 必须要有
        // orderSql: 'totalStationNumber asc'
      }
      fetchList(params).then(res => {
        console.log('res',res.data.data)
        this.rowData = res.data.data
        this.rowData.map(v => {
          v.creatDateBak = moment(v.creatDate).format('YYYY-MM-DD hh:mm:ss')
        })
        this.page.total = res.data.data.length
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getList()
    },
    // 清空搜索
    searchReset () {
      this.searchForm = {}
      this.page.currentPage = 1
      // this.getList();
    }
  }
}
</script>
<style lang='scss'>
.el-range-separator{
  z-index: 1000 !important;
}
.el-dialog__body{
    padding: 10px;
  }
.innerBoxDialog{
  width: 100%;
  margin: 0 auto;
  // background: pink;
  border: 1px solid #00b99e;
  overflow: auto;
  padding: 20px 20px;
  border-radius: 6px;
  .p_title{
    color: #000;
    font-size: 18px;
    font-weight: 500;
    position: relative;
  }
  .p_title:before{
    content: '';
    height: 80%;
    width: 4px;
    background: #00b99e;
    border-radius: 4px;
    position: absolute;
    left: -10px;
    top: 2px;
  }
  .box_title{
    height: 40px;
    width: 100%;
    background: #00b99e40;
    margin: 10px 0;
    border-radius: 2px;
  }
  .contentBox{
    border: 1px solid #00b99e;
    padding: 10px;
    border-radius: 6px;
  }
}
</style>
